<template>
    <n-space vertical class="page-user">
        <div class="header">
            <n-space>
                <n-button type="primary" @click="handleAdd">新增</n-button>
                <n-button>删除</n-button>
                <n-button>导入</n-button>
            </n-space>
        </div>
        <!-- preset 使用何种预设，dialog，就可以使用dialog的属性和方法
        
        -->
        <n-data-table :columns="columns" :data="data"/>
    </n-space>
    <!-- preset 使用何种预设，dialog，就可以使用dialog的属性和方法
        show-icon  是否显示图标
        
    -->

    <n-modal v-model:show="showAdd"  
        preset="dialog" title="新增用户" 
        :show-icon="false" 
        negative-text="取消" positive-text="确定"
        @negative-click="negativeClick"
        @positive-click="positiveClick"
         >
        <n-form ref="addFormRef" :model="addModel" :rules="addRules">
            <n-grid x-gap="12">
                <n-form-item-gi span="12" label="用户名" path="username">
                    <n-input v-model:value="addModel.username" />
                </n-form-item-gi>
            
                <n-form-item-gi span="12" label="密码" path="password">
                    <n-input v-model:value="addModel.password" />
                </n-form-item-gi>
                <!-- span="24" 占据一行 -->
                <n-form-item-gi span="12" label="角色">
                    <n-select v-model:value="addModel.role" :options="roles"/>
                </n-form-item-gi>
            </n-grid>                    
        </n-form>
    </n-modal>

</template>

<script>
import { addUser } from '@/api/user';

export default{
    name:'system_user',
    data(){
        return{
            columns:[],
            data:[],

            // 是否显示新增的弹窗
            showAdd:false,
            // 角色列表 下拉选择项
            roles:[
                { label:"管理员",value:0 },
                { label:"超级管理员",value:1 }
            ],
            // 新增表单的数据
            addModel: {
                username:'',
                password:'',
                role:0,
            },
            // 表单校验
            addRules:{
                username:[
                    { required:true,message:'请输入用户名',trigger:"blur"}
                ],
                password:[
                    { required:true,message:'请输入密码',trigger:"blur"}
                ],
            }
        }
    },
    methods:{
        handleAdd(){
            this.showAdd = true;
        },
        // 点击取消
        negativeClick(){

        },
        // 点击确定按钮
        // 校验表单1  用回调函数的方式
        // positiveClick(){
        //     this.$refs.addFormRef.validate((error)=>{
        //         if(error){
        //             console.log('校验失败');
        //             return;
        //         }
        //         console.log('校验成功');
        //     })          
        //     return false; //阻止关闭弹出框
        // },

        // 校验表单2  用promise的方式
        async positiveClick(){
            await this.$refs.addFormRef.validate();
            // 如果校验通过，就能往下执行
            console.log('校验成功');
            // 调用接口，新增用户
            const response = await addUser({
                adminname:this.addModel.username,
                password: this.addModel.password,
                role: this.addModel.role,
                checkedKeys: []
            })
            this.$message.success('新增成功')

            return false; //阻止关闭弹出框
        },
    }
}
</script>

<style lang="scss" scoped>
.page-user{
    background-color: #fff;
    padding: 8px;
}
</style>
